<!-- 打赏 -->
<template>
	<div class="main">
		<!-- 标题 -->
		<div class="title flex flex-y flex-between">
			<h3>{{title}}</h3>
			<div class="right">
				<el-button
					v-loading="loading"
					@click="save()"
					class="right"
					type="primary"
					size="small">保存
				</el-button>
				<el-button class="right" size="small" @click="ifShow = !ifShow">变动日志</el-button>
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<div class="area">
				<h3 class="title">随机打赏设置</h3>
				<div class="flex flex-y group">
					<div style="width:600px;" class="flex flex-wrap">
						<div
							class="flex flex-y"
							v-for="(item,index) in formData"
							:key="index"
							style="margin:4px 0">
							<label>随机值{{index+1}}</label>
							<ipt v-model="item.paramValue" style="width:50px" class="right10"/>
							<p class="right60">元</p>
						</div>
					</div>
					<!-- <div style="width:300px">
						<div
							class="flex flex-y"
							v-for="(item,index) in formData2"
							:key="index"
							style="margin:4px 0">
							<p>出现概率</p>
							<ipt v-model="item.paramValue" style="width:50px" class="left10 right10"/>
							<p class="right60">%</p>
						</div>
					</div> -->
				</div>
			</div>
			<div class="area">
				<h3 class="title">作者收益设置</h3>
				<div class="flex flex-y group">
					<div class="flex flex-y">
						<p>平台抽成</p>
						<ipt v-model="randomRewardIncome[0].paramValue" style="width:50px" class="left10 right10"/>
						<p class="right60">%</p>
					</div>
					<div class="flex flex-y">
						<p>税率</p>
						<ipt v-model="randomRewardIncome[1].paramValue" style="width:50px" class="left10 right10"/>
						<p>%</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 变动日志 -->
		<el-dialog title="变动日志" :visible.sync="ifShow">
			<airlog query="randomReward" />
		</el-dialog>
	</div>
</template>

<script>
import airlog from '@/pages/runManage/param/components/log.vue'
export default {
	props:["title","data"],
	components:{
		airlog
	},
	data () {
		return {
			ifShow:false,
			loading:false,
			formData:[],
			formData2:[],
			randomRewardIncome:[
				{
					uid:'',
					paramType:'',
					paramName:'',
					paramValue:0
				},
				{
					uid:'',
					paramType:'',
					paramName:'',
					paramValue:0
				}
			]
		}
	},
	watch:{
		data(val){
			// 处理数据，方便v-for
			for (var i = 0; i < 10; i++) {
				let j = i+1;
				// 随机值
				this.formData[i].uid = val['randomReward'+j][0].uid;
				this.formData[i].paramType = 'randomReward';
				this.formData[i].paramName = val['randomReward'+j][0].paramName;
				this.formData[i].paramValue = val['randomReward'+j][0].paramValue;
				// 出现概率
				// this.formData2[i].uid = val['randomReward'+j][1].uid;
				// this.formData2[i].paramType = 'randomReward';
				// this.formData2[i].paramName = val['randomReward'+j][1].paramName;
				// this.formData2[i].paramValue = val['randomReward'+j][1].paramValue;
			}
			// 作者收益
			this.randomRewardIncome.map((o,n)=>{
				o.uid = val.randomRewardIncome[n].uid,
				o.paramType = 'randomReward',
				o.paramName = val.randomRewardIncome[n].paramName,
				o.paramValue = val.randomRewardIncome[n].paramValue
			})
		},
	},
	methods:{
		save:function(){
			this.loading = true;
			// 拼接数组
			var arr = this.formData.concat(this.randomRewardIncome);
			console.log(arr);
			// 请求
			HTTP('financeSet_save', arr)
			.then(res=>{
				this.loading = false;
				if(res.code == 200){
					this.common.msg('保存成功');
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
	},
	mounted(){

	},
	created(){
		// 填充数据，默认为0
		for (var i = 0; i < 10; i++) {
			this.formData.push({
				paramValue:0
			});
			this.formData2.push({
				paramValue:0
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	/deep/ .el-input__inner{
		text-align: center;
		height: 33px;
		line-height: 33px;
	}
	.main{
		padding: 25px 30px;
		//标题
		.title{
			position: relative;
			h3{
				font-size: 16px;
			}
			h3:before{
				position: absolute;
				left: -16px;
				top: 5px;
				content:'\25CF';
				color: $blue;
			}
		}
	}
	.content{
		//margin-top: 40px;
		.area{
			.title{
				padding: 44px 0 4px 0;
				font-size: 16px;
				color: $blue;
			}
			.group{
				label{
					display: block;
					width: 64px;
					text-align: left;
				}
				margin: 14px 0;
			}
			.right60{
				margin-right: 60px;
			}
		}
	}
</style>
